.wy{
    @each $k,$v in $colors{
        &-bg-#{$k}{
            background-color: $v;
        }
        &-color-#{$k}{
            color: $v;
        }
    }
}
@function get-custom-val($maps,$key){
    /* #ifdef VUE3 */
    $key:#{$key}+'';
    /* #endif */
    /* #ifndef VUE3 */
     $key:#{$key};
    /* #endif */ 
    $customVal: map-get($map: $maps, $key:'custom' ); 
    @if($key=='custom'){
        @return $customVal;
    }@else if map-has-key($map:$maps , $key:$key ){
        $vals:map-get($map: $maps, $key:$key);
        @each $k,$v in $customVal {
            @if(map-has-key($map:$vals , $key:$k )){
                
            } @else {
                /* #ifdef VUE3 */
                $vals:map-merge($map1: $vals, $map2:(#{''+$k}:$v) )
                /* #endif */
                /* #ifndef VUE3 */
                $vals:map-merge($map1: $vals, $map2:(#{$k}:$v) )
                /* #endif */
            }  
        }  
        @return $vals; 
    }@else{
        @return $customVal;
    }
}
$wy-theme-var:get-custom-val($wy-themes,'custom') !default;
$wy-size-var:get-custom-val($wy-screen-sizes,$wy-screen-mode) !default; 
@function get-val-by-key($map,$key,$dfmap){
    @if map-has-key($map, $key ) {
        @return map-get($map, $key );
    }
    @else {
        @return map-get( $dfmap,$key );
    }
}
@mixin respond-to-theme($p){
    $color-primary: get-val-by-key($p,'color-primary',$wy-theme-var);
    $color-success: get-val-by-key($p,'color-success',$wy-theme-var);
    $color-warning: get-val-by-key($p,'color-warning',$wy-theme-var);
    $color-error: get-val-by-key($p,'color-error',$wy-theme-var);
    $color-custom: get-val-by-key($p,'color-custom',$wy-theme-var);
    $color-link: get-val-by-key($p,'color-link',$wy-theme-var);
    $text-color: get-val-by-key($p,'text-color',$wy-theme-var);
    $text-color-inverse: get-val-by-key($p,'text-color-inverse',$wy-theme-var);
    $text-color-second: get-val-by-key($p,'text-color-second',$wy-theme-var);
    $text-color-third: get-val-by-key($p,'text-color-third',$wy-theme-var);
    $text-color-forth: get-val-by-key($p,'text-color-forth',$wy-theme-var);
    $text-color-place: get-val-by-key($p,'text-color-place',$wy-theme-var);
    $text-color-disabled: get-val-by-key($p,'text-color-disabled',$wy-theme-var);
    $bg-color-inverse: get-val-by-key($p,'bg-color-inverse',$wy-theme-var);
    $bg-color-page: get-val-by-key($p,'bg-color-page',$wy-theme-var);
    $bg-color-light: get-val-by-key($p,'bg-color-light',$wy-theme-var);
    $bg-color-middle: get-val-by-key($p,'bg-color-middle',$wy-theme-var);
    $bg-color-dark: get-val-by-key($p,'bg-color-dark',$wy-theme-var);  
    $bg-color-hover: get-val-by-key($p,'bg-color-hover',$wy-theme-var);
    $bg-color-hover-dark: get-val-by-key($p,'bg-color-hover-dark',$wy-theme-var);
    $bg-color-mask: get-val-by-key($p,'bg-color-mask',$wy-theme-var);
    $bg-color-mask-dark: get-val-by-key($p,'bg-color-mask-dark',$wy-theme-var);
    $border-color: get-val-by-key($p,'border-color',$wy-theme-var);
    $border-color-light: get-val-by-key($p,'border-color-light',$wy-theme-var);
    $border-color-dark: get-val-by-key($p,'border-color-dark',$wy-theme-var);
    $border-color-inverse: get-val-by-key($p,'border-color-inverse',$wy-theme-var);
    
    $nav-title-color: get-val-by-key($p,'nav-title-color',$wy-theme-var);
    $nav-icon-color: get-val-by-key($p,'nav-icon-color',$wy-theme-var);
    $nav-item-color: get-val-by-key($p,'nav-item-color',$wy-theme-var);
    $nav-bg-color: get-val-by-key($p,'nav-bg-color',$wy-theme-var); 
    $bg-form:get-val-by-key($p,'bg-form',$wy-theme-var);
    $bg-form-item:get-val-by-key($p,'bg-form-item',$wy-theme-var);
    $color-form-border:get-val-by-key($p,'color-form-border',$wy-theme-var);
    
    $directions:('left','top','right','bottom');

    .wy{
        &-page {
            background-color: $bg-color-page;
            color: $text-color;
        }
        &-disabled { 
        	&-text {
        		color: $text-color-disabled;
        	}
        } 
        $customColors:('primary':$color-primary,'success':$color-success,'warning':$color-warning,'error':$color-error,'custom':$color-custom,'link':$color-link);
        $titles:('bg':background-color,'color':color);
        @each $k,$v in $customColors {
            @each $kk,$vv in $titles {
                &-#{$kk}-#{$k}{
                   #{$vv}: #{$v}; 
                }
                &-#{$kk}-#{$k}--{
                   #{$vv}: #{$v} !important; 
                }
            }   
        } 
        $bgs:('inverse','page','light','middle','dark','hover','hover-dark');
        @each $k in $bgs {
            &-bg-#{$k}{
                background-color:get-val-by-key($p,'bg-color-'+$k,$wy-theme-var);
            }
            &-bg-#{$k}--{
                background-color:get-val-by-key($p,'bg-color-'+$k,$wy-theme-var) !important;
            }
        }
        &-bg{
            &-nav-title {
            	background-color: $nav-title-color;
            }
            &-nav-icon {
            	background-color: $nav-icon-color;
            }
            &-nav-item {
            	background-color: $nav-item-color;
            }
        }
        $txts:('text','inverse','second','third','forth','place','disabled');
        @each $k in $txts {
            $ck:'text-color-'+$k;
            @if $k=='text' {
                $ck:'text-color'
            }
            &-color-#{$k}{
                color:get-val-by-key($p,$ck,$wy-theme-var);
            }
            &-color-#{$k}--{
                color:get-val-by-key($p,$ck,$wy-theme-var) !important;
            }
        }
        &-color{
            &-nav-title {
            	color: $nav-title-color;
            }
            &-nav-icon {
            	color: $nav-icon-color;
            }
            &-nav-item {
            	color: $nav-item-color;
            }
        }
        
        
        $borders:('light':$border-color-light,'dark':$border-color-dark,'inverse':$border-color-inverse);
        &-border{
            &-all {
            	/* #ifdef H5 || MP-TOUTIAO */
            	border-color: $border-color !important;
            	/* #endif */
            	/* #ifndef H5 || MP-TOUTIAO */ 
            	border-color: $border-color;
            	/* #endif */
            	
            	@each $k, $v in $borders {
            		&-#{$k} {
            			/* #ifdef H5 || MP-TOUTIAO */ 
            			border-color: #{$v} !important;
            			/* #endif */
            			/* #ifndef H5 || MP-TOUTIAO */ 
            			border-color: #{$v} !important;
            			/* #endif */
            		}
            	}
            }
            @each $k in $directions {
            	&-#{$k} {
            		/* #ifdef H5 || MP-TOUTIAO */
            		border-#{$k}-color: $border-color !important; 
            		/* #endif */
            		/* #ifndef H5 || MP-TOUTIAO */
            		border-#{$k}-color: $border-color; 
            		/* #endif */
            		
            		@each $kk, $vv in $borders {
            			&-#{$kk} {
            				/* #ifdef H5 || MP-TOUTIAO */ 
            				border-#{$k}-color: #{$vv} !important;
            				/* #endif */
            				/* #ifndef H5 || MP-TOUTIAO */ 
            				border-#{$k}-color: #{$vv};
            				/* #endif */
            			}
            		}
            	}
            }
        } 
    }
    
}
@mixin respond-to-size($p){
    $pxSize:get-val-by-key($p,'pxSize',$wy-size-var);
    $rpxSize:get-val-by-key($p,'rpxSize',$wy-size-var);
    $nav-item-size: get-val-by-key($p,'nav-item-size',$wy-size-var)*$pxSize;
    $nav-icon-size:get-val-by-key($p,'nav-icon-size',$wy-size-var)*$pxSize;
    $nav-title-size: get-val-by-key($p,'nav-title-size',$wy-size-var)*$pxSize;
    $border-width:get-val-by-key($p,'border-width',$wy-size-var)*$pxSize;
    $height-ss:get-val-by-key($p,'height-ss',$wy-size-var)*$rpxSize;
    $height-s: get-val-by-key($p,'height-s',$wy-size-var)*$rpxSize;
    $height-base:get-val-by-key($p,'height-base',$wy-size-var)*$rpxSize;
    $height-l: get-val-by-key($p,'height-l',$wy-size-var)*$rpxSize;
    $height-ll:get-val-by-key($p,'height-ll',$wy-size-var)*$rpxSize; 
    $font-size-ss:get-val-by-key($p,'font-size-ss',$wy-size-var)*$rpxSize;
    $font-size-s:get-val-by-key($p,'font-size-s',$wy-size-var)*$rpxSize;
    $font-size-base:get-val-by-key($p,'font-size-base',$wy-size-var)*$rpxSize;
    $font-size-l:get-val-by-key($p,'font-size-l',$wy-size-var)*$rpxSize;
    $font-size-ll: get-val-by-key($p,'font-size-ll',$wy-size-var)*$rpxSize; 
    $lh-ss:get-val-by-key($p,'lh-ss',$wy-size-var)*$rpxSize;
    $lh-s: get-val-by-key($p,'lh-s',$wy-size-var)*$rpxSize;
    $lh-base:get-val-by-key($p,'lh-base',$wy-size-var)*$rpxSize;
    $lh-l:  get-val-by-key($p,'lh-l',$wy-size-var)*$rpxSize;
    $lh-ll:get-val-by-key($p,'lh-ll',$wy-size-var)*$rpxSize; 
    
    $space-ss: get-val-by-key($p,'space-ss',$wy-size-var)*$rpxSize; 
    $space-s: get-val-by-key($p,'space-s',$wy-size-var)*$rpxSize; 
    $space-base: get-val-by-key($p,'space-base',$wy-size-var)*$rpxSize; 
    $space-l: get-val-by-key($p,'space-l',$wy-size-var)*$rpxSize; 
    $space-ll: get-val-by-key($p,'space-ll',$wy-size-var)*$rpxSize; 
    
    $border-radius-ss: get-val-by-key($p,'border-radius-ss',$wy-size-var)*$rpxSize;
    $border-radius-s: get-val-by-key($p,'border-radius-s',$wy-size-var)*$rpxSize;
    $border-radius-base: get-val-by-key($p,'border-radius-base',$wy-size-var)*$rpxSize;
    $border-radius-l: get-val-by-key($p,'border-radius-l',$wy-size-var)*$rpxSize;
    $border-radius-ll:get-val-by-key($p,'border-radius-ll',$wy-size-var)*$rpxSize; 
    $opacity-disabled: get-val-by-key($p,'opacity-disabled',$wy-size-var);
    $opacity-hover:get-val-by-key($p,'opacity-hover',$wy-size-var); 
    //媒体查询值
    $page-small-size: get-val-by-key($p,'page-small-size',$wy-size-var)*$pxSize;
    $page-large-size: get-val-by-key($p,'page-large-size',$wy-size-var)*$pxSize;
    
    .wy{
        &-page{
            font-size: $font-size-base;
        }
        //文字大小
        $txtSize:('ss','s','base','l','ll');
        $directions:('left','top','right','bottom');
        @each $size in $txtSize {
            &-size-#{$size} {
                font-size: get-val-by-key($p,'font-size-'+$size,$wy-size-var)*$rpxSize;
            } 
            &-size-#{$size}-- {
                font-size: get-val-by-key($p,'font-size-'+$size,$wy-size-var)*$rpxSize !important;
            }
            &-height-#{$size} {
                font-size: get-val-by-key($p,'height-'+$size,$wy-size-var)*$rpxSize;
            } 
            &-height-#{$size}-- {
                font-size: get-val-by-key($p,'height-'+$size,$wy-size-var)*$rpxSize !important;
            }
            &-lh-#{$size} {
                line-height: get-val-by-key($p,'lh-'+$size,$wy-size-var)*$rpxSize;
            }
            &-radius-#{$size} {
                border-radius: get-val-by-key($p,'border-radius-'+$size,$wy-size-var)*$rpxSize;
                &-top {
                    border-top-left-radius:get-val-by-key($p,'border-radius-'+$size,$wy-size-var)*$rpxSize;
                    border-top-right-radius: get-val-by-key($p,'border-radius-'+$size,$wy-size-var)*$rpxSize;
                }
                &-left {
                    border-top-left-radius:get-val-by-key($p,'border-radius-'+$size,$wy-size-var)*$rpxSize;
                    border-bottom-left-radius: get-val-by-key($p,'border-radius-'+$size,$wy-size-var)*$rpxSize;
                }
                &-bottom {
                    border-bottom-right-radius:get-val-by-key($p,'border-radius-'+$size,$wy-size-var)*$rpxSize;
                    border-bottom-left-radius: get-val-by-key($p,'border-radius-'+$size,$wy-size-var)*$rpxSize;
                }
                &-right {
                    border-bottom-right-radius:get-val-by-key($p,'border-radius-'+$size,$wy-size-var)*$rpxSize;
                    border-top-right-radius: get-val-by-key($p,'border-radius-'+$size,$wy-size-var)*$rpxSize;
                }
                &-top-left {
                    border-top-left-radius:get-val-by-key($p,'border-radius-'+$size,$wy-size-var)*$rpxSize;
                }
                &-top-right {
                    border-top-right-radius: get-val-by-key($p,'border-radius-'+$size,$wy-size-var)*$rpxSize;
                }
                &-bottom-left {
                    border-bottom-left-radius: get-val-by-key($p,'border-radius-'+$size,$wy-size-var)*$rpxSize;
                }
                &-bottom-right {
                    border-bottom-right-radius:get-val-by-key($p,'border-radius-'+$size,$wy-size-var)*$rpxSize;
                }
            }
            
            
            @each $dire in $directions {
                &-#{$dire}-#{$size}{
                    #{$dire}: get-val-by-key($p,'space-'+$size,$wy-size-var)*$rpxSize;
                }  
            }
            &-ps{
                &-all-#{$size}{
                    padding-top: get-val-by-key($p,'space-'+$size,$wy-size-var)*$rpxSize;
                    padding-bottom: get-val-by-key($p,'space-'+$size,$wy-size-var)*$rpxSize;
                    padding-left: get-val-by-key($p,'space-'+$size,$wy-size-var)*$rpxSize;
                    padding-right: get-val-by-key($p,'space-'+$size,$wy-size-var)*$rpxSize;
                }
                &-tb-#{$size}{
                    padding-top: get-val-by-key($p,'space-'+$size,$wy-size-var)*$rpxSize;
                    padding-bottom: get-val-by-key($p,'space-'+$size,$wy-size-var)*$rpxSize;
                }
                &-lr-#{$size}{
                    padding-left: get-val-by-key($p,'space-'+$size,$wy-size-var)*$rpxSize;
                    padding-right: get-val-by-key($p,'space-'+$size,$wy-size-var)*$rpxSize;
                }
                @each $dire in $directions {
                    &-#{$dire}-#{$size}{
                        padding-#{$dire}: get-val-by-key($p,'space-'+$size,$wy-size-var)*$rpxSize;
                    }  
                }
            }
            &-ms{
                &-all-#{$size}{
                    margin-top: get-val-by-key($p,'space-'+$size,$wy-size-var)*$rpxSize;
                    margin-bottom: get-val-by-key($p,'space-'+$size,$wy-size-var)*$rpxSize;
                    margin-left: get-val-by-key($p,'space-'+$size,$wy-size-var)*$rpxSize;
                    margin-right: get-val-by-key($p,'space-'+$size,$wy-size-var)*$rpxSize;
                }
                &-tb-#{$size}{
                    margin-top: get-val-by-key($p,'space-'+$size,$wy-size-var)*$rpxSize;
                    margin-bottom: get-val-by-key($p,'space-'+$size,$wy-size-var)*$rpxSize;
                }
                &-lr-#{$size}{
                    margin-left: get-val-by-key($p,'space-'+$size,$wy-size-var)*$rpxSize;
                    margin-right: get-val-by-key($p,'space-'+$size,$wy-size-var)*$rpxSize;
                }
                @each $dire in $directions {
                    &-#{$dire}-#{$size}{
                        margin-#{$dire}: get-val-by-key($p,'space-'+$size,$wy-size-var)*$rpxSize;
                    }  
                }
            }
            
            
        }
        
		$borderSize:('s','base');
        &-border{
            &-all {
            	/* #ifdef H5 || MP-TOUTIAO */
            	border-width: $border-width !important;
            	border-style: solid !important; 
            	/* #endif */
            	/* #ifndef H5 || MP-TOUTIAO */
            	border-width: $border-width;
            	border-style: solid; 
            	/* #endif */ 
				@each $size in $borderSize{
					&-#{$size}{
						/* #ifdef H5 || MP-TOUTIAO */
						border-width: get-val-by-key($p,'border-width-'+$size,$wy-size-var)*$rpxSize !important;
						border-style: solid !important; 
						/* #endif */
						/* #ifndef H5 || MP-TOUTIAO */
						border-width: get-val-by-key($p,'border-width-'+$size,$wy-size-var)*$rpxSize;
						border-style: solid; 
						/* #endif */ 
					}
				}
            }
            @each $k in $directions {
            	&-#{$k} {
            		/* #ifdef H5 || MP-TOUTIAO */ 
            		border-#{$k}-width: $border-width !important;
            		border-#{$k}-style: solid !important;
            		/* #endif */
            		/* #ifndef H5 || MP-TOUTIAO */ 
            		border-#{$k}-width: $border-width;
            		border-#{$k}-style: solid;
            		/* #endif */
            	}
            }
            &-none {
            	/* #ifdef H5 || MP-TOUTIAO */
            	border-width: 0 !important;
            	/* #endif */
            	/* #ifndef H5 || MP-TOUTIAO */
            	border-width: 0;
            	/* #endif */
            }
        }  
    
        &-disabled {
        	opacity: $opacity-disabled; 
        }
        &-opacity {
        	&-hover {
        		opacity: $opacity-hover;
        	}
        	&-disabled {
        		opacity: $opacity-disabled;
        	}
        }
    }
    $txtSize:('nav-title','nav-icon','nav-item');
    @each $size in $txtSize {
        .wy-size-#{$size} {
            font-size: get-val-by-key($p,$size+'-size',$wy-size-var)*$rpxSize;
        } 
    } 
    
} 

@include respond-to-theme($wy-theme-var);  
.wy-theme{ 
    @each $k, $v in $wy-themes {  
       @if $k == 'custom' {
         
       } 
       @else { 
           /* #ifdef VUE3 */
           &-#{''+$k} {
              @include respond-to-theme($v); 
           } 
           /* #endif */
           /* #ifndef VUE3 */
           &-#{$k} {
              @include respond-to-theme($v); 
           } 
           /* #endif */ 
       }
       
    }
}
@include respond-to-size($wy-size-var); 
.wy-screen{
    @each $k, $v in $wy-screen-sizes { 
        @if $k == $wy-screen-mode+'' {
          
        }@else {
            /* #ifdef VUE3 */
            &-#{''+$k} {
               @include respond-to-size($v); 
            } 
            /* #endif */
            /* #ifndef VUE3 */
            &-#{$k} {
               @include respond-to-size($v); 
            } 
            /* #endif */  
        }
    }
}
/* #ifdef H5 */
@media only screen and (min-width: $wy-page-large-size) {
	
	html{
		background-color: #b0e0fa !important;
	}
	body{
		background-image: none;
		max-width: $wy-page-large-size;
		margin: auto;
	
	}
	.wy-popo-tb .n-popo{
		margin: auto;
		left: 0 !important;
		right: 0 !important;
		max-width: $wy-page-large-size;
	}
	.wy-max-width{
		max-width: $wy-page-large-size;
	}
	.wy-full-width{
		max-width:$wy-page-large-size;
	}
	.wy-form-easy-postion-fixed{
		left: unset !important;
	}
	.wy-tabbar,.uni-page-head,.u-navbar,.uni-tabbar,.cu-bar.tabbar,uni-page-refresh,.uni-page-refresh--pulling,.uni-page-refresh--reached{
		max-width:$wy-page-large-size;
		margin: auto;
		left: 0;
		right: 0;
	}
	uni-toast .uni-toast{
		width:5em;
	}
	.uni-toast__content{
		font-size: 24px;
	}
	uni-toast .uni-toast__content{
		margin:0 0 15px;
	}
	.wy-head-auto{
		max-width:$wy-page-large-size;
		width: 100%;
	}
}
/* #endif */
@import './wyapp.common.scss';//常用
